<template>
  <div class="upper_part" :playing="playing">
    <div v-if="xin" @click="xin=false">
      <svg
        t="1646400892041"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="2041"
        width="25"
        height="25"
      >
        <path
          d="M523.733333 841.024l33.173334-32.576 99.690666-97.813333c70.976-69.632 120.32-117.973333 138.709334-135.893334 59.008-57.514667 93.248-121.28 99.626666-184.234666 6.250667-61.44-15.488-119.744-61.589333-164.672-44.992-43.84-98.88-61.909333-157.034667-52.906667-49.365333 7.616-101.034667 34.624-150.016 78.848a21.333333 21.333333 0 0 1-28.586666 0c-48.981333-44.224-100.650667-71.232-150.016-78.869333-58.154667-8.96-112.042667 9.088-157.034667 52.928-46.101333 44.928-67.84 103.210667-61.610667 164.693333 6.4 62.933333 40.64 126.72 99.648 184.213333a100207.573333 100207.573333 0 0 1 145.92 142.826667l24.256 23.765333L512 852.522667l11.733333-11.498667z m-11.733333 11.52l-1.493333 1.429333A2.133333 2.133333 0 0 1 512 853.333333c0.512 0 1.045333 0.213333 1.493333 0.64l-1.493333-1.450666z m157.781333-721.792c71.637333-11.093333 138.901333 11.477333 193.344 64.533333 55.317333 53.930667 81.834667 124.992 74.282667 199.530667-7.466667 73.642667-46.549333 146.368-112.32 210.474667-18.346667 17.898667-67.669333 66.218667-138.453333 135.637333-31.829333 31.232-65.706667 64.448-99.84 97.984L553.6 871.466667l-13.184 12.949333a40.554667 40.554667 0 0 1-56.832 0l-114.602667-112.64-24.213333-23.722667a677626.346667 677626.346667 0 0 0-145.856-142.762666C133.141333 541.184 94.08 468.48 86.613333 394.816c-7.552-74.538667 18.944-145.6 74.282667-199.530667 54.442667-53.056 121.706667-75.605333 193.344-64.533333 53.162667 8.213333 107.093333 34.688 157.781333 76.949333 50.709333-42.24 104.618667-68.736 157.781334-76.949333z"
          fill="#FFFFFF"
          p-id="2042"
        ></path>
      </svg>
    </div>

    <div v-else @click="xin=true">
      <svg
        t="1646827175531"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="1469"
        width="25"
        height="25"
      >
        <path
          d="M719.5 126C634 126 565 173.3 513.3 234.7 463.2 171.1 394.4 126 308.8 126c-120.5 0-205.4 103.6-205.4 216.6 0 60.6 24.8 104.3 52 145.3l319.1 382.6c35.8 33.6 42.6 33.6 78.4 0l319.9-382.6c32-41 52-84.7 52-145.3 0.1-113-84.8-216.6-205.3-216.6z"
          p-id="1470"
          fill="#d81e06"
        ></path>
      </svg>
    </div>

    <div>
      <svg
        t="1646824410987"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="9936"
        width="25"
        height="25"
      >
        <path
          d="M502.010485 765.939573c3.773953 3.719718 8.686846 5.573949 13.596669 5.573949 0.075725 0 0.151449-0.010233 0.227174-0.011256 0.329505 0.016373 0.654916 0.050142 0.988514 0.050142 0.706081 0 1.400906-0.042979 2.087545-0.116657 4.352121-0.366344 8.607028-2.190899 11.961426-5.496178l335.053985-330.166675c7.619538-7.509021 7.709589-19.773346 0.200568-27.393907s-19.774369-7.711636-27.39493-0.201591L536.193005 706.304358 536.193005 50.019207c0-10.698666-8.67252-19.371186-19.371186-19.371186s-19.371186 8.67252-19.371186 19.371186l0 657.032164-306.881342-302.44838c-7.618515-7.509021-19.883863-7.419993-27.393907 0.199545-7.509021 7.619538-7.419993 19.884886 0.199545 27.393907L502.010485 765.939573z"
          p-id="9937"
          fill="#FFFFFF"
        ></path>
        <path
          d="M867.170139 711.020776c-10.698666 0-19.371186 8.67252-19.371186 19.371186l0 165.419494c0 13.054317-10.620895 23.675212-23.676236 23.675212L205.182103 919.486668c-13.054317 0-23.676236-10.620895-23.676236-23.675212L181.505867 730.391962c0-10.698666-8.67252-19.371186-19.371186-19.371186s-19.371186 8.67252-19.371186 19.371186l0 165.419494c0 34.416857 28.000728 62.416562 62.417585 62.416562l618.941638 0c34.417881 0 62.417585-27.999704 62.417585-62.416562L886.540302 730.391962C886.541325 719.693296 877.868805 711.020776 867.170139 711.020776z"
          p-id="9938"
          fill="#FFFFFF"
        ></path>
      </svg>
    </div>
    <div>
      <svg
        t="1646401133550"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="9190"
        width="25"
        height="25"
      >
        <path
          d="M780.053333 816.469333c-35.456 9.557333-75.114667 2.432-104.32-22.037333L370.304 538.709333a21.269333 21.269333 0 0 1-5.269333-6.549333A237.44 237.44 0 0 1 341.333333 533.333333C211.733333 533.333333 106.666667 428.266667 106.666667 298.666667S211.733333 64 341.333333 64s234.666667 105.066667 234.666667 234.666667c0 8-0.405333 15.914667-1.173333 23.701333 2.432 1.28 4.693333 3.029333 6.549333 5.269333l255.722667 305.429334c34.858667 41.621333 34.517333 104.405333 0.917333 146.005333-0.384 0.469333-2.389333 9.322667-3.242667 12.416-22.805333 81.301333-74.282667 127.317333-150.613333 142.997333-58.474667 12.010667-125.610667 6.826667-224.469333-12.074666-14.933333-2.858667-29.44-5.781333-51.626667-10.346667-172.736-35.541333-230.826667-38.826667-264.725333-3.754667a21.333333 21.333333 0 1 1-30.677334-29.653333c28.672-29.653333 72.170667-39.893333 132.266667-36.48 42.410667 2.410667 73.984 7.978667 171.733333 28.096 22.016 4.522667 36.352 7.402667 51.050667 10.24 176.170667 33.706667 270.08 22.293333 312.32-64.042667z m-364.16-295.232L703.146667 761.728c27.605333 23.125333 71.530667 21.205333 97.002666-4.266667 25.472-25.472 27.413333-69.354667 4.266667-97.002666L563.904 373.226667a235.285333 235.285333 0 0 1-148.010667 148.010666zM341.333333 490.666667a192 192 0 1 0 0-384 192 192 0 0 0 0 384z m184.682667 22.848l30.165333-30.165334 90.517334 90.496-30.186667 30.186667-90.496-90.517333z"
          fill="#FFFFFF"
          p-id="9191"
        ></path>
      </svg>
    </div>
    <div>
      <svg
        t="1646824650649"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="10966"
        width="30"
        height="30"
      >
        <path
          d="M519.110443 637.45734 339.641979 637.45734c-6.338359 0-11.477402-5.13802-11.477402-11.477402 0-6.337335 5.13802-11.478426 11.477402-11.478426l179.469488 0c6.337335 0 11.478426 5.13802 11.478426 11.478426C530.588869 632.318296 525.448802 637.45734 519.110443 637.45734z"
          p-id="10967"
          fill="#FFFFFF"
        ></path>
        <path
          d="M670.981363 514.022053 339.641979 514.022053c-6.338359 0-11.477402-5.13802-11.477402-11.477402 0-6.338359 5.13802-11.477402 11.477402-11.477402l331.339384 0c6.338359 0 11.478426 5.13802 11.478426 11.477402C682.458765 508.885056 677.319721 514.022053 670.981363 514.022053z"
          p-id="10968"
          fill="#FFFFFF"
        ></path>
        <path
          d="M574.334185 390.586766 339.641979 390.586766c-6.338359 0-11.477402-5.13802-11.477402-11.477402 0-6.339382 5.13802-11.477402 11.477402-11.477402l234.69323 0c6.337335 0 11.477402 5.13802 11.477402 11.477402C585.810564 385.448746 580.672544 390.586766 574.334185 390.586766z"
          p-id="10969"
          fill="#FFFFFF"
        ></path>
        <path
          d="M919.060461 889.522216c-1.12973 0-2.270716-0.165776-3.38612-0.51063-0.62524-0.192382-63.340607-19.500123-123.917264-33.3035-6.179746-1.407046-10.048867-7.560186-8.639774-13.739932 1.407046-6.181793 7.563256-10.05296 13.740956-8.640798 37.45403 8.534374 75.674517 19.131733 99.956549 26.151613-7.981788-16.190751-18.782785-38.864146-28.837792-62.45954-35.845393-84.127026-32.279171-108.028389-25.168216-119.453602 33.617655-54.018288 51.387367-114.538663 51.387367-175.018106 0-190.297091-174.452217-345.115132-388.885008-345.115132-214.43893 0-388.897288 154.818041-388.897288 345.115132 0 194.506972 178.093141 358.831528 388.897288 358.831528 60.238966 0 118.250194-12.94073 172.424025-38.45994 5.732561-2.704598 12.573363-0.24457 15.274892 5.490038 2.701528 5.734608 0.2415 12.57234-5.492084 15.273868-57.255005 26.974351-118.557186 40.651862-182.205808 40.651862-55.288211 0-109.167329-10.429537-160.13821-31.000038-48.794309-19.690458-92.807732-47.75463-130.820488-83.408665-37.766139-35.422767-67.499323-76.343759-88.375793-121.627105-21.577434-46.806026-32.516578-95.842859-32.516578-145.750525 0-49.856501 10.958586-98.213859 32.573883-143.726425 20.827351-43.856857 50.615794-83.219353 88.537476-116.994598 77.726246-69.224618 180.978864-107.348913 290.740734-107.348913 109.75573 0 213.006302 38.124296 290.730501 107.348913 37.921681 33.775244 67.708078 73.138764 88.537476 116.994598 21.61325 45.51359 32.57286 93.869924 32.57286 143.726425 0 64.771189-18.968004 129.486096-54.853305 187.148377-0.916882 1.471514-7.952112 16.736173 26.748201 98.206696 18.646686 43.779086 39.96113 84.396155 40.173978 84.800361 2.159176 4.105504 1.636267 9.106402-1.327228 12.676717C925.673066 888.047632 922.415882 889.522216 919.060461 889.522216z"
          p-id="10970"
          fill="#FFFFFF"
        ></path>
      </svg>
    </div>
    <div style="margin-top: 4px">
      <svg
        t="1646401261390"
        class="icon"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="11203"
        width="20"
        height="20"
      >
        <path
          d="M512 810.666667a85.333333 85.333333 0 1 1-85.333333 85.333333 85.333333 85.333333 0 0 1 85.333333-85.333333zM426.666667 512a85.333333 85.333333 0 1 0 85.333333-85.333333 85.333333 85.333333 0 0 0-85.333333 85.333333z m0-384A85.333333 85.333333 0 1 0 512 42.666667a85.333333 85.333333 0 0 0-85.333333 85.333333z"
          fill="#FFFFFF"
          p-id="11204"
        ></path>
      </svg>
    </div>
  </div>
</template>

<script>
export default {
  props: ["playing"],
  data: function () {
    return {
      xin: true,
    };
  },
};
</script>

<style lang="less">
.upper_part {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  margin-top: 100px;
}
</style>